<template>
  <u-mask :show="shareModel" @click="shareModel = false" >
      <image :src="shareImg"  class="poster" mode="widthFix" ></image>
     <div class="bottom">
      
          <button class="item" open-type="share" @click="goShareApp('weixin','WXSceneSession',2)" >
                  <u-image class="icon" src="/static/images/share/icon-wechat.png" width="70" height="70" ></u-image>
              <p class="name">微信好友</p>
          </button>
       <div class="item" @click="goShareApp('weixin','WXSenceTimeline',2)">
               <u-image class="icon"  src="/static/images/share/icon-timeLine.png" width="70" height="70"></u-image>
              <p class="name">朋友圈</p>
          </div>
       <div class="item" @click="savaImgAlbum" >
                  <u-image class="icon" src="/static/images/share/icon-download.png" width="70" height="70" ></u-image>
              <p class="name">保存海报</p>
          </div>
       <div class="item" @click="copyShareLink" >
                  <u-image class="icon"  src="/static/images/share/icon-copyLink.png" width="70" height="70"></u-image>
              <p class="name">复制链接</p>
          </div>
       <div class="item" @click="otherShare" >
                  <u-image class="icon" src="/static/images/share/icon-otherShare.png" width="70" height="70" ></u-image>
              <p class="name">系统分享</p>
          </div>
     </div>

  </u-mask>
</template>

<script>
import shareJS from "@/utils/share.js"

export default {
name: "shareMask",
  mixins:[shareJS],
  data(){
  return{
    shareModel:false,
     }
  },

  onLoad(){
    uni.showShareMenu({
      title:'小程序分享',
      content:'',
      path:'/pages/tabBar/Home'
    })
  }

}
</script>

<style lang="scss" scoped>
.poster{
    margin: 0 auto;
    transform: scale(0.9);
    margin-top: 80upx;
     display: block;
     border-radius: 20upx;
}
.bottom{
  position: fixed;
  display:flex;
  justify-content: space-between;
  align-items: center;

  bottom:40upx;
  /*  #ifdef H5 */
  bottom:110upx;
  /*  #endif  */
  width: 90%;
  margin:0 auto;
  left:0;
  right:0;
  .item{
      display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: transparent;
    padding:0;
    margin:0;
    text-align: center;
      .icon{
        margin: 0 auto;
      }
    .name{
      color: #fff;
      font-size: 28upx;
      color: #f5f5f5;
      margin-top: 10upx;
      line-height: 1.4;
    }
  }
}
</style>
